<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<?php echo $data["appId"]; ?>', // 必填，公众号的唯一标识
            timestamp: <?php echo $data["timestamp"]; ?>, // 必填，生成签名的时间戳
            nonceStr: '<?php echo $data["nonceStr"]; ?>', // 必填，生成签名的随机串
            signature: '<?php echo $data["sign"]; ?>',// 必填，签名
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'startRecord',
                'stopRecord',
                'playVoice',
                'stopVoice',
                'pauseVoice',
                'uploadVoice',
                'downloadVoice',
                'onVoiceRecordEnd',
                'translateVoice',
                'scanQRCode',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideAllNonBaseMenuItem',
                'closeWindow',
                'hideMenuItems',
            ] // 必填，需要使用的JS接口列表
        });
        wx.ready(function () {

            //隐藏所有非基础类按钮
            // wx.hideAllNonBaseMenuItem();
            // “基本类”按钮详见附录3
            //隐藏部分功能按钮
            wx.hideMenuItems({
                menuList: [
                    'menuItem:share:appMessage'
                ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
            });
            //关闭当前页面
            // wx.closeWindow();
            //获取地理位置接口
            // wx.getLocation({
            //     type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            //     success: function (res) {
            //         var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            //         var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            //         var speed = res.speed; // 速度，以米/每秒计
            //         var accuracy = res.accuracy; // 位置精度
            //         // alert(latitude);
            //         // alert(longitude);
            //         // alert(speed);
            //         // alert(accuracy);
            //         wx.openLocation({
            //             latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
            //             longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
            //             name: '蒙多', // 位置名
            //             address: '想去哪就去哪', // 地址详情说明
            //             scale: 20, // 地图缩放级别,整形值,范围从1~28。默认为最大
            //             infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
            //         });
            //     }
            // });
            // //打开地图查看位置
            // wx.openLocation({
            //     latitude: 40, // 纬度，浮点数，范围为90 ~ -90
            //     longitude: 120, // 经度，浮点数，范围为180 ~ -180。
            //     name: '蒙多', // 位置名
            //     address: '想去哪就去哪', // 地址详情说明
            //     scale: 20, // 地图缩放级别,整形值,范围从1~28。默认为最大
            //     infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
            // });

            // //获取网络状态接口
            // wx.getNetworkType({
            //     success: function (res) {
            //         var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            //         alert(networkType);
            //     }
            // });
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.onMenuShareAppMessage({
                title: '涵哥打开它！！', // 分享标题
                desc: '我是一个身材苗条的美女', // 分享描述
                link: '<?php echo $data["url"]; ?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532967467563&di=d4c9961d2fc82a5057ff418b26d28295&imgtype=0&src=http%3A%2F%2Fimg7.ph.126.net%2FCUdI9WMS6VaYQXciFmnmeA%3D%3D%2F3103824568206180957.jpg', // 分享图标
                success: function () {
// 用户点击了分享后执行的回调函数
                }
            });
            //分享到微信朋友圈
            wx.onMenuShareTimeline({
                title: '大家好,我是渣渣辉!!!是兄弟，就来贪玩蓝月，一起来砍我!!', // 分享标题
                link: '<?php echo $data["url"]; ?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532969017196&di=3440d1a26d0c4d3ed5ea50c20e5c28dd&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170727%2Fe9e80f24172c4c9ba2247d867ff79bbf_th.jpg', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                },
            });
            // 监听语音播放完毕接口
            wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
                complete: function (res) {
                    var localId = res.localId;
                    alert(123);
                }
            });

        })
    </script>
    <script>
        $(function () {
            var urls = [
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533007313490&di=3ffaca8b9c402210a8b0c857fa2f10ef&imgtype=0&src=http%3A%2F%2Fxnnews.com.cn%2Fwenyu%2Flxsj%2F201710%2FW020171030786965608760.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533007331527&di=13f875bbe551769bafff459670e96371&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D912701435%2C748040803%26fm%3D214%26gp%3D0.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533615951&di=76f9591f99f83970d2f8039283965ba4&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.puaschool.cn%2Fpictures%2F2016%2F07%2F03%2Fa69805f2c6f948b3bae46458a7d114ea.jpg',
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2240421949,428374963&fm=27&gp=0.jpg',
            ];
            var html = '';
            for (var i = 0; i < urls.length;i++){
                html += '<img src="'+urls[i]+'" onclick="chakan(this)" style="width:100%;">';
            }
            $('.qiang').html(html);
        });

        function paizhao() {
            // {{图片接口}}
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    //设置某个图片的src属性
                    $('.zhaopian').attr('src',localIds);
                    // {{上传图片接口}}
                    wx.uploadImage({
                        localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            // {{下载图片接口}}
                            wx.downloadImage({
                                serverId:serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    var localId = res.localId; // 返回图片下载后的本地ID
                                    //设置某个图片的src属性
                                    $('.zhaopian').attr('src',localIds);
                                }
                            });
                            // {{下载图片接口}}
                        }
                    });
                    // {{上传图片接口}}
                }
            });
            // {{图片接口}}
        }

        function chakan(el) {
            var urls = [
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533007313490&di=3ffaca8b9c402210a8b0c857fa2f10ef&imgtype=0&src=http%3A%2F%2Fxnnews.com.cn%2Fwenyu%2Flxsj%2F201710%2FW020171030786965608760.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533007331527&di=13f875bbe551769bafff459670e96371&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D912701435%2C748040803%26fm%3D214%26gp%3D0.jpg',
               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533615951&di=76f9591f99f83970d2f8039283965ba4&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.puaschool.cn%2Fpictures%2F2016%2F07%2F03%2Fa69805f2c6f948b3bae46458a7d114ea.jpg',
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2240421949,428374963&fm=27&gp=0.jpg',
            ];
            //获取当前点击的图片的src属性值
            var src = $(el).attr('src');
            wx.previewImage({
                current: src, // 当前显示图片的http链接
                urls: urls // 需要预览的图片http链接列表
            });
        }
        function luyin() {
            wx.startRecord();
        }
        //设置语音全局变量
        var yuyin = '';
        function tingzhi() {
            wx.stopRecord({
                success: function (res) {
                    yuyin = res.localId;
                    // wx.playVoice({
                    //     localId: yuyin // 需要播放的音频的本地ID，由stopRecord接口获得
                    // });
                    //上传语音
                    wx.uploadVoice({
                        localId: yuyin, // 需要上传的音频的本地ID，由stopRecord接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回音频的服务器端ID
                            // 下载语音
                            wx.downloadVoice({
                                serverId: serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    var localId = res.localId; // 返回音频的本地ID
                                    // 播放语音
                                    wx.playVoice({
                                        localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
                                    });
                                }
                            });
                        }
                    });
                }
            });
        }
        function bofang() {
            wx.playVoice({
                localId: yuyin // 需要播放的音频的本地ID，由stopRecord接口获得
            });
        }
        function stop() {
            wx.stopVoice({
                localId: yuyin // 需要停止的音频的本地ID，由stopRecord接口获得
            });
        }
        function zanting() {
            wx.pauseVoice({
                localId: yuyin // 需要暂停的音频的本地ID，由stopRecord接口获得
            });
        }
        function shibie() {
            wx.translateVoice({
                localId: yuyin, // 需要识别的音频的本地Id，由录音相关接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    alert(res.translateResult); // 语音识别的结果
                }
            });
        }
        function saomiao() {
            wx.scanQRCode({
                needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    alert(result);
                }
            });
        }
    </script>
</head>
<body>
<h1>我是分享的页面</h1>

<span class="paizhao" onclick="paizhao()">我要拍照</span>
<img src="" class="zhaopian" style="width: 100%;">
<hr>
<p onclick="luyin()">我要录音</p>
<p onclick="tingzhi()">停止录音</p>
<p onclick="bofang()">播放录音</p>
<p onclick="stop()">停止播放</p>
<p onclick="zanting()">暂停播放</p>
<p onclick="shibie()">语音识别</p>
<p onclick="saomiao()">扫一扫</p
<p>下面的照片墙</p>
<div class="qiang">
</div>
</body>
</html>